<template>
  <CustomNav title="拾光锦汉服体验店" url="appointment"></CustomNav>
  <view class="container">
    <view class="logo">
      <u-image
        :show-loading="true"
        src="https://img1.baidu.com/it/u=1098307165,1560600932&fm=253&fmt=auto&app=120&f=JPEG?w=800&h=800"
        width="250rpx"
        height="250rpx"
        radius="10px"
      ></u-image>
    </view>
    <view class="title">
      <view class="txt">{{ homeStore.name }}</view>
      <i class="iconfont icon-shangxiajiantou"></i>
    </view>
    <view class="businessHours">营业时间：全年10：00——22：00</view>

    <view class="inputBox ipt01" @click="projectContainer">
      <view class="text">预约服务</view>
      <view class="ipt">
        <view class="input">
          <input
            disabled
            placeholder="请选择服务项目"
            v-model.trim="appointmentStore.appointmentService"
          />
        </view>
        <view class="arrow">></view>
      </view>
    </view>

    <view class="inputBox ipt02" @click="handleTime">
      <view class="text">服务时间</view>
      <view class="ipt">
        <view class="input">
          <input
            disabled
            placeholder="请选择服务时间"
            v-model.trim="appointmentStore.serviceTime"
          />
        </view>
        <view class="arrow">></view>
      </view>
    </view>

    <view class="reserve"
      >预留信息<span>(请填写)</span></view
    >

    <view class="inputBox ipt03">
      <view class="text">姓名</view>
      <view class="ipt">
        <view class="input">
          <input
            placeholder="请输入姓名"
            v-model.trim="appointmentStore.contacts"
          />
        </view>
      </view>
    </view>

    <view class="inputBox ipt04">
      <view class="text">手机号</view>
      <view class="ipt">
        <view class="input">
          <input
            placeholder="请输入您的手机号"
            type="number"
            maxlength="11"
            v-model.trim="appointmentStore.contactNumber"
          />
        </view>
      </view>
    </view>

    <view class="inputBox ipt05">
      <view class="text">预约人数</view>
      <view class="ipt">
        <view class="input">
          <input
            placeholder="请输入预约人数"
            type="number"
            v-model.trim="appointmentStore.appointmentQuantity"
          />
        </view>
      </view>
    </view>

    <view class="schedule" @click="submitAppointment">立即预约</view>
  </view>

  <!-- 项目套餐弹出层 -->
  <van-popup
    :show="projectShow"
    position="bottom"
    round
    @close="projectShow = false"
  >
    <view class="project">
      <view class="select">
        <view
          v-for="(item, index) in ProjectNameList"
          :key="index"
          @click="projectNameHandle(item.name, item.id, index)"
          :class="projectActiveIndex == item.index ? 'active' : ''"
          >{{ item.name }}</view
        >
      </view>

      <view class="btn">
        <view class="cancel" @click="projectShow = false">取消</view>
        <view class="confirm" @click="confirmProjectSelect">确定</view>
      </view>
    </view>
  </van-popup>

  <!-- 年月日 -->
  <van-popup :show="dateShow" position="bottom" round @close="dateShow = false">
    <view class="date">
      <!-- 服务日期（年月日） -->
      <!-- <van-calendar show @close="timeShow = false" @confirm="timeConfirm" /> -->
      <van-calendar
        class="calendar"
        :show="true"
        :poppable="false"
        @close="dateShow = false"
        @confirm="timeConfirm"
      />
    </view>
  </van-popup>

  <!-- 小时 -->
  <van-popup
    :show="datetimePicker"
    position="bottom"
    round
    @close="columnsCancel"
  >
    <!-- 选择时间（时分）
    <van-datetime-picker
      type="time"
      :value="currentDate"
      :min-hour="minHour"
      :max-hour="maxHour"
      @cancel="datetimePicker = false"
      @confirm="datetimePickerConfirm"
    /> -->

    <!-- 时间段 -->
    <van-picker
      :columns="columns"
      show-toolbar
      title="大唐不夜城店预约"
      @cancel="columnsCancel"
      @confirm="columnsConfirm"
      @change="columnsChange"
    />
  </van-popup>
</template>

<script setup>
import CustomNav from "@/components/CustomNav/index.vue";
import { submitOrder } from "@/api/appointment/index";
import { Alert } from "@/utils/tool";
import useAppointmentStore from "@/store/modules/appointment";
import useHomeStore from "@/store/modules/home";
import { comboMeal } from "@/api/comboMeal";
import { getItem } from "@/utils/localStorage";

const homeStore = useHomeStore();

console.log("useHomeStore:", homeStore.showStatus);

const appointmentStore = useAppointmentStore();

// 套餐列表
// 项目
// 状态
const projectShow = ref(false);
// 店铺（套餐列表）
// const ProjectNameList = ref([
//   {
//     index: 0,
//     text: "大唐不夜城套餐/陕西工院套餐",
//   },
//   {
//     index: 1,
//     text: "套餐一/套餐一",
//   },
//   {
//     index: 2,
//     text: "套餐二/套餐二",
//   },
//   {
//     index: 3,
//     text: "套餐三/套餐三",
//   },
//   {
//     index: 4,
//     text: "套餐四/套餐四",
//   },
//   {
//     index: 5,
//     text: "套餐五/套餐五",
//   },
// ]);
const ProjectNameList = ref([]);

onMounted(() => {
  projectHandle();
});
const projectHandle = async () => {
  const result = await comboMeal(1, 100, getItem("userInfo").shopId);
  console.log("result：", result);

  ProjectNameList.value = result.data.data.result;
};
// 店铺选择
const projectName = ref("");
// 激活店铺Active
const projectActiveIndex = ref(-1);
// 点击服务项目容器
const projectContainer = () => {
  projectShow.value = true;
};
// 选择项目套餐处理函数
const projectNameHandle = (name, id, index) => {
  console.log(name, id, index);

  ProjectNameList.value[index].index = index;

  projectName.value = name;
  projectActiveIndex.value = index;

  // 当前选择的套餐ID
  appointmentStore.appointmentServiceId = id;
};
// 确认店铺
const confirmProjectSelect = () => {
  // 正式逻辑等上限再改
  projectShow.value = false;
  // Alert(`已选择${projectName.value}`, "none", 1500, true);

  console.log("projectName.value = name;：", projectName.value);

  appointmentStore.appointmentService = projectName.value;
};

// 选择日期
const timeShow = ref(false);
// 日历
const calendar = ref("");

const minDate = ref(new Date(2024, 3, 1).getTime());
const maxDate = ref(new Date(2024, 3, 19).getTime());

// 显示日历
const handleTime = () => {
  timeShow.value = true;

  dateShow.value = true;
};
// 日历确认函数
const dateConfirm = () => {};

// 日历处理函数
const timeConfirm = (e) => {
  console.log("e:", e);
  calendar.value =
    new Date(e.detail).getFullYear() +
    "-" +
    (new Date(e.detail).getMonth() + 1) +
    "-" +
    new Date(e.detail).getDate();

  appointmentStore.serviceTime = calendar.value;

  timeShow.value = false;

  dateShow.value = false;

  datetimePicker.value = true;
};
// 选择时分
// 状态
const datetimePicker = ref(false);
const currentDate = ref("10:00");
// const minHour = ref(10);
// const maxHour = ref(22);
// const datetimePickerConfirm = (e) => {
//   console.log(e);
//   currentDate.value = e.detail;
//   datetimePicker.value = false;

//   calendar.value += " " + currentDate.value;
// };
// 日期显示状态
const dateShow = ref(false);

const columns = ref([
  "10：30—12：30",
  "12：30—14：30",
  "14：30—16：30",
  "16:30—18：30",
]);

const columnsCancel = (e) => {
  console.log("e1：", e);
  datetimePicker.value = false;

  // 点击取消了选择时间
  // 清空服务时间（年月日）
  appointmentStore.serviceTime = "";
};
const columnsConfirm = (e) => {
  console.log("e2：", e);

  currentDate.value = e.detail.value;

  calendar.value += " " + currentDate.value;
  appointmentStore.serviceTime = calendar.value;

  datetimePicker.value = false;
};

const columnsChange = (e) => {
  console.log(e);
};

// 姓名
const nickname = ref("");
// 手机号
const phone = ref("");
// 预约人数
const appointmentCount = ref(0);

// 立即预约
const submitAppointment = async () => {
  // const result = await submitOrder({
  //   packageId: 7,
  //   nickname: nickname.value,
  //   phone: phone.value,
  //   personNumber: appointmentCount.value,
  //   appointTime: calendar.value,
  //   shopId: 1,
  //   quantity: 1,
  // });

  // console.log("result：", result);

  // if (!useHomeStore.showStatus) {
  //   uni.navigateTo({
  //     url: "/pagesA/appointmentSuccess/index",
  //   });
  //   return;
  // }

  const app = appointmentStore.testVal();
  console.log(app);

  // 校验成功
  if (app == "ok") {
    uni.navigateTo({
      url: "/pagesA/confirmAppointment/index",
    });
  }
};
</script>
<script>
export default {
  name: "",
};
</script>

<style lang="scss" scoped>
.container {
  width: 100%;
  height: 90vh;
  background-color: #f7f7f7;
  display: flex;
  flex-direction: column;
  align-items: center;

  .logo {
    // box-shadow: 0 0 20rpx 3rpx #ccc;
    margin-top: 70rpx;
    margin-bottom: 16rpx;
    overflow: hidden;
  }

  .title {
    font-size: 36rpx;
    font-weight: 900;
    display: flex;
    align-items: center;

    .txt {
      margin-right: 15rpx;
    }

    .iconfont {
    }
  }

  .businessHours {
    font-size: 24rpx;
    color: #ecb16a;
    font-weight: 600;
    margin: 20rpx 0 26rpx;
  }

  .inputBox {
    width: 90%;
    display: flex;
    align-items: center;
    border: 1px solid #fbda97;
    border-radius: 12rpx;
    padding: 20rpx 55rpx;
    padding-right: 0;
    margin-bottom: 16rpx;

    .text {
      width: 130rpx;
    }

    .ipt {
      display: flex;
      align-items: center;
      justify-content: space-between;
      flex: 1;
      padding-left: 30rpx;
      padding-right: 40rpx;

      .input {
        flex: 1;

        input {
          font-size: 28rpx;
          color: #9b9b9b;
        }
      }
    }
  }

  .reserve {
    width: 80%;
    font-size: 30rpx;
    margin: 20rpx 0;

    label {
      color: #febf3c;
      font-size: 24rpx;
    }
  }

  .schedule {
    display: inline-block;
    padding: 20rpx 55rpx;
    border-radius: 50rpx;
    color: #fff;
    font-size: 28rpx;
    background-color: $btn;
    box-shadow: 0 0 10rpx 4rpx rgba(0, 0, 0, 0.4);
    border: 1px solid #ee9324;
    margin-top: 70rpx;
  }
}

// 项目套餐弹出层
.project {
  height: 600rpx;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 20rpx;

  .select {
    width: 100%;
    padding: 0 60rpx;
    // margin-bottom: 100rpx;
    height: 410rpx;
    // border: 1px solid red;
    overflow: hidden;
    overflow-y: scroll;
    display: flex;
    flex-direction: column;
    justify-content: center;

    view {
      font-size: 30rpx;
      height: 90rpx;
      // margin-bottom: 40rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      border-radius: 14rpx;
    }

    .active {
      background-color: #ffc345;
      color: #fff;
    }
  }

  .btn {
    width: 100%;
    display: flex;
    justify-content: space-between;
    padding: 0 50rpx;
    margin-top: 40rpx;

    view {
      width: 160rpx;
      height: 80rpx;
      color: #fff;
      font-weight: 300;
      border-radius: 20rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 32rpx;
      transition: all 0.2s;
    }

    .cancel {
      background-color: #bbbbbb;

      &:active {
        opacity: 0.7;
      }
    }
    .confirm {
      background-color: $btn;

      &:active {
        opacity: 0.7;
      }
    }
  }
}

.date {
  height: 70vh;

  .calendar {
    // --calendar-height: 618px;
  }
}
</style>
